import {
  createInput,
  createSelect,
  createSlot,
  commonRules,
  createTextarea,
  createDate,
} from '@/components/DynamicForm/config'
import { ref, computed } from 'vue'

const caseTypeList = [
  { value: '0', label: '简易案件' },
  { value: '1', label: '一般案件' },
]

export const pageConfig = () => {
  const formConfig = {
    labelWidth: '100px',
    inline: true,
    keyup: true,
    buttonAlign: 'right',
    isSearch: true,
    buttons: [
      { text: '搜索', type: 'primary', action: 'submit' },
      { text: '重置', action: 'reset' },
    ],
  }
  const formItems = [
    createInput('当事人名称', 'username', {
      placeholder: '请输入当事人名称',
      style: { width: '18vw' },
      props: {
        clearable: true,
      },
    }),
    createInput('立案号', 'field1', {
      placeholder: '请输入立案号',
      style: { width: '18vw' },
      props: {
        clearable: true,
      },
    }),
    createSelect('案件来源', 'field2', {
      placeholder: '请输入案件来源',
      style: { width: '18vw' },
      props: {
        clearable: true,
      },
      dictKey: 'case_source',
      optionProps: {
        label: 'label',
        value: 'value',
        key: 'value',
      },
    }),
    createSelect('立案程序', 'field3', {
      placeholder: '请选择立案程序',
      style: { width: '18vw' },
      props: {
        clearable: true,
      },
      options: caseTypeList,
    }),
    createSlot('立案时间', 'dateRange', {
      slotName: 'dateRange',
      style: { width: '18vw' },
    }),
  ]
  const columns = ref({
    field1: { label: '立案号', visible: true },
    userName: { label: '当事人名称', visible: true },
    field2: { label: '案由', visible: true },
    field3: { label: '案件来源', visible: true },
    field4: { label: '立案程序', visible: true },
    dateRange: { label: '立案时间', visible: true },
  })
  const newColumns = computed(() => [
    {
      type: 'index',
      label: '序号',
      width: 60,
      align: 'center',
      slots: {
        default: 'index',
      },
    },
    ...(columns.value.field1.visible
      ? [
          {
            label: '立案号',
            key: 'field1',
            prop: 'field1',
            align: 'center' as const,
          },
        ]
      : []),
    ...(columns.value.userName.visible
      ? [
          {
            label: '当事人名称',
            key: 'userName',
            prop: 'userName',
            align: 'center' as const,
          },
        ]
      : []),
    ...(columns.value.field2.visible
      ? [
          {
            label: '案由',
            key: 'field2',
            prop: 'field2',
            align: 'center' as const,
          },
        ]
      : []),
    ...(columns.value.field3.visible
      ? [
          {
            label: '案件来源',
            key: 'field3',
            prop: 'field3',
            align: 'center' as const,
            cellRenderer: {
              type: 'dictField',
              dictKey: 'case_source',
              showTag: true,
            },
          },
        ]
      : []),
    ...(columns.value.field4.visible
      ? [
          {
            label: '立案程序',
            key: 'field4',
            prop: 'field4',
            align: 'center' as const,
          },
        ]
      : []),
    ...(columns.value.dateRange.visible
      ? [
          {
            label: '立案时间',
            key: 'dateRange',
            prop: 'dateRange',
            align: 'center' as const,
          },
        ]
      : []),
    {
      label: '操作',
      key: 'action',
      prop: 'action',
      align: 'center' as const,
      fixed: 'right' as const,
      slots: {
        default: 'action',
      },
    },
  ])
  return {
    columns,
    newColumns,
    formConfig,
    formItems,
  }
}
